<template>
  <view class="container">
    <view class="search">
      <van-search
        @search="getList('refresh')"
        clearable
        shape="round"
        @change="onChange"
        :value="pageModel.title"
        placeholder="请输入搜索关键词"
      />
    </view>
    <scroll-view
      v-if="list.length > 0"
      class="list"
      @scrolltolower="lowerBottom"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <view
        @click="toKnowledgeDetail(item)"
        class="flex item"
        v-for="(item, index) in list"
        :key="index"
      >
        <!-- 课程审核状态 -1.已驳回 0.待提交 1.专业人员待审核 2.品控专员待审核
        3.品控经理待审核 4.副总经理待审核 5.已通过 -->
        <view class="label overtxt">{{ item.title }}</view>
        <view
          :class="[
            item.approval > 0 && item.approval < 5
              ? 'status1'
              : `status${item.approval}`,
          ]"
          >{{
            item.approval == 0
              ? "待提交"
              : item.approval == 5
              ? "已通过"
              : item.approval == -1
              ? "已驳回"
              : "待审核"
          }}</view
        >
      </view>
      <div class="more">{{ canLoading ? "加载更多" : "到底了~" }}</div>
    </scroll-view>
    <div v-else>
      <div style="width: 100%; height: 50px"></div>
      <van-empty description="暂无记录" />
    </div>
  </view>
</template>
    
    
<script>
import { knowledgetemporarylist } from "@/common/api/knowledge";
export default {
  data() {
    return {
      categoryId: "",
      list: [],
      triggered: true,
      _freshing: false,
      canLoading: false,
      pageModel: {
        dataScope: "0",
        title: "",
        pageNum: 1,
        pageSize: 10,
        categoryId: "",
      },
    };
  },
  onShow() {
    this.getList("refresh");
  },
  onLoad(options) {
    this.pageModel.categoryId = options.categoryId;
  },
  methods: {
    /* 查看知识草稿详情 */
    toKnowledgeDetail(item) {
      if (item.approval == 0) {
        uni.navigateTo({
          url: `/pages_knowledge/detail?knowledgeTemporaryId=${item.id}&status=${item.approval}`,
        });
      }
    },
    /* 输入 */
    onChange(e) {
      this.pageModel.title = e.detail ? e.detail : null;
    },
    /* 获取知识点列表 */
    async getList(type) {
      try {
        if (type == "refresh") {
          uni.showLoading({
            mask: true,
            title: "加载中",
          });
        }
        let roles = uni.getStorageSync("roles");
        if (
          roles.includes("dgm") ||
          roles.includes("gm") ||
          roles.includes("ts") ||
          roles.includes("qcs") ||
          roles.includes("qcm") ||
          roles.includes("hr")
        ) {
          this.pageModel.dataScope = "0";
        } else {
          this.pageModel.dataScope = "1";
        }
        this.pageModel.pageNum =
          type == "refresh" ? 1 : this.pageModel.pageNum + 1;
        let res = await knowledgetemporarylist(this.pageModel);
        if (res.code == 200) {
          this.list =
            type == "refresh" ? res.rows : [...this.list, ...res.rows];
          this.canLoading = this.list.length < res.total ? true : false;
        }
      } catch (error) {}
    },
    lowerBottom() {
      if (this.canLoading) {
        this.pageModel.pageNum = this.pageModel.pageNum + 1;
        this.getList();
      }
    },
    onPulling(e) {
      console.log("onpulling", e);
    },
    async onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      await this.getList("refresh");
      this.triggered = false;
      this._freshing = false;
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
      console.log("onRestore");
    },
    onAbort() {
      console.log("onAbort");
    },
  },
};
</script>
    <style lang="scss" scoped>
.container {
  box-sizing: border-box;
  background: #fafafa;
  min-height: 100vh;
  //   搜索框！！！
  .search {
    width: 750rpx;
    ::v-deep .van-cell {
      height: 60rpx !important;
      line-height: 60rpx !important;
      padding: 8rpx 0 0 0 !important;
    }
    ::v-deep .van-search {
      width: 750rpx;
      box-sizing: border-box;
      padding: 14rpx 32rpx 14rpx 32rpx !important;
    }
    ::v-deep .van-search__content {
      height: 60rpx !important;
      line-height: 60rpx !important;
    }
  }
  .more {
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .list {
    height: calc(100vh - 88rpx);
    .item {
      padding: 0 48rpx;
      height: 88rpx;
      line-height: 88rpx;
      .label {
        width: 540rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #4e8dff;
        margin-right: 30rpx;
      }
      .status-1 {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #e95756;
      }
      .status0 {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .status1 {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f89a33;
      }
      .status5 {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #04b900;
      }
    }
  }
}
</style>